<template>
    <div class="app-container">
        <el-card class="box-card" shadow="always" v-show="showSearch">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="88px" @submit.native.prevent>
                <el-form-item label="供应商名称" prop="supplierName">
                    <el-input v-model="queryParams.supplierName" placeholder="请输入供应商名称" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="供应商编号" prop="supplierCode">
                    <el-input v-model="queryParams.supplierCode" placeholder="请输入供应商编号" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="queryParams.contacts" placeholder="请输入联系人" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">搜索</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div :gutter="20" class="mt20 content">

            <div v-show="tableHeight && showTree" :style="`height: ${tableHeight}px;position: relative;`">
                <div class="left" :style="`height: ${tableHeight}px;`">
                    <div class="left-top">
                        <div class="">
                            供应商分类
                        </div>
                        <div class="">

                            <img style="width: 30px; height: 30px;" @click="handleEdge"
                                :src="showTree ? imgs[1] : imgs[0]">
                        </div>
                    </div>
                    <el-tree ref="classifyTreeRef" class="mt-2" node-key="id" :data="classifyList"
                        :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
                        :filter-node-method="filterNode" highlight-current default-expand-all @node-click="itemClick" />
                    <div class="buttons">
                        <div class="button" @click="handleAddClassify">
                            <el-icon>
                                <CirclePlus />
                            </el-icon>
                            <div>新增分类</div>
                        </div>
                        <div class="button" @click="handleEditClassify">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            <div>编辑分类</div>
                        </div>
                        <div class="button" @click="handleDelClassify">
                            <el-icon>
                                <Delete />
                            </el-icon>
                            <div>删除分类</div>
                        </div>
                    </div>
                </div>
            </div>

            <el-card ref="table" shadow="always" :body-style="{ padding: '20px' }"
                :class="{ 'w-tree': showTree, 'w-all': !showTree }">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" @click="handleAdd">添加供应商
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">删除
                        </el-button>
                    </el-col>
                    <right-toolbar :v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
                <el-table :height="'calc(100vh - 380px)'" v-loading="loading" :data="dataSource"
                    @selection-change="handleSelectionChange" @row-dblclick="dbclick">
                    <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
                    <el-table-column label="供应商名称" align="left" prop="supplierName" />
                    <!-- <el-table-column label="排序" align="left" prop="sort" width="150" /> -->
                    <el-table-column label="分类" align="left" prop="supplierClassifyName" width="150" />
                    <el-table-column label="创建时间" align="left" prop="createTime" />
                    <!-- <el-table-column label="状态" align="left" prop="classStatus">
                    <template #default="scope">
                        <el-tag :type="scope.row.classStatus == 1 ? 'success' : 'danger'">
                            {{ scope.row.classStatus == 1 ? '正常' : '隐藏' }}
                        </el-tag>
                    </template>
</el-table-column> -->
                    <el-table-column label="操作" align="left">
                        <template #default="scope">
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination :total="total" v-model:page.sync="queryParams.pageNum"
                    v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-card>
        </div>

        <div class="fixed-icon" @click="handleEdge" v-show="!showTree">

            <el-icon>
                <DArrowRight />
            </el-icon>
        </div>
        <addForm ref="modelForm" :classifyList="classifyList" @ok="getList"></addForm>
        <categoryAddForm ref="categoryAddForm" @ok="getClassifyTree('0', setCurrentKey)"></categoryAddForm>
    </div>
</template>

<script>
import addForm from './modules/addForm.vue';
import categoryAddForm from '../supplierCategory/modules/addForm.vue';
import listMixin from '@/mixins/listMixin';
import request from '@/utils/request';
import zk from '@/assets/images/zhankai.svg'
import zd from '@/assets/images/zhedie.svg'
import { handleTree, findNodeInTree } from '@/utils/ruoyi';
export default {
    name: "supplier",
    dicts: ["inventory_status", "counting_method"],
    components: {
        addForm, categoryAddForm
    },
    mixins: [listMixin],
    data() {
        return {
            queryParams: {
                type: '0',
                pageNum: 1,
                pageSize: 10,
            },
            urls: {
                list: '/order/supplier/list',
                delete: '/order/supplier',
            },
            currentIndex: 0,
            tableHeight: 0,
            imgs: [zk, zd],
            assistList: [],
            currentItem: {},
            showTree: true,
        }
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.tableHeight = this.$refs.table.$el.scrollHeight
            }, 200)

        })
        // 获取分类列表
        this.getClassifyTree('0');
    },
    methods: {
        setCurrentKey(res) {
            this.$nextTick(() => {
                if (findNodeInTree(this.classifyList[0], this.currentItem.id)) {
                    this.$refs.classifyTreeRef.setCurrentKey(this.currentItem.id);
                } else {
                    this.$refs.classifyTreeRef.setCurrentKey(null);
                    this.itemClick({})
                }
            })
        },
        listAfter() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.tableHeight = this.$refs.table.$el.scrollHeight
                }, 200)
            })
        },
        itemClick(item) {
            console.log(666);
            this.currentItem = item;
            this.queryParams.supplierClassifyId = item.id;
            this.getList();
        },
        handleAdd() {
            this.$refs.modelForm.add({ supplierClassifyId: this.queryParams.supplierClassifyId });
        },
        handleAddClassify() {
            this.$refs.categoryAddForm.add({});
        },
        handleEditClassify() {
            if (!this.currentItem.id) {
                this.$message.warning('请选择分类');
                return;
            }
            this.$refs.categoryAddForm.edit(this.currentItem);
        },

        handleDelClassify() {
            if (!this.currentItem.id) {
                this.$message.warning('请选择分类');
                return;
            }
            this.$modal.confirm('确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(666);
                request({
                    url: '/order/supplierClassify/' + this.currentItem.id,
                    method: 'delete'
                }).then(res => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess('删除成功')
                        this.currentItem = {};
                        this.getClassifyTree('0', this.setCurrentKey);
                    } else {
                        this.$modal.msgError(res.msg)
                    }
                });
            }).catch(() => { });
        },
        resetQuery() {
            this.queryParams = {
                type: '0',
                pageNum: 1,
                pageSize: 10,
            }
            this.currentItem = {};
            this.$refs.classifyTreeRef.setCurrentKey(null);
            this.getList();
        },

    },
};
</script>


<style scoped lang="scss">
.tree-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* border-bottom: 1px solid #777; */
    /* padding: 5px 0; */
    cursor: pointer;
    background-color: #fff;
}

.tree-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.item__selected {
    background-color: #e6f7ff;
}

.tree__line {
    width: 24px;
    height: 24px;
    border-bottom: 1px dashed #e5e5eb;
    border-left: 1px dashed #e5e5eb;
}

.tree__title {
    padding: 0 4px;
    margin-bottom: -24px;
}

.left {
    width: 240px;
    border: 1px solid #e6ebf5;
    // position: relative;
    border-radius: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 60px;
    background-color:#fff;

    .fodder_list {
        z-index: 20;

        .fodder_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            cursor: pointer;

            .box {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                svg {
                    margin-right: 10px;
                }

                .fodder_name {
                    font-size: 14px;
                    color: #303133;
                    width: 84px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .fodder_item.active,
        .fodder_item:hover {
            background-color: #f5f5f5;
        }
    }

    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        position: absolute;
        bottom: 1px;
        width: 238px;
        border-top: 1px solid #e6ebf5;
        background-color: #fff;
        z-index: 21;
        font-size: 12px;
        color: #303133;

        .button {
            cursor: pointer;
            padding: 10px;
            text-align: center;

            i {
                margin-right: 5px;
            }
        }

        .button:not(:last-child) {
            border-right: 1px solid #e6ebf5;
        }

        .button:hover {
            color: #409eff;
        }
    }
}

.left-top {
    display: flex;
    justify-content: space-between;
    padding: 6px 20px;
    border-bottom: 1px solid #e6ebf5;
    align-items: center;

    .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 24px;
        color: #303133;
        font-weight: bold;
    }
}


.fixed-icon {
    position: fixed;
    //left: 0;
    top: 400px;
    z-index: 999;
    background-color: #409eff;
    padding: 12px 2px;
    color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: flex;
    cursor: pointer;
}

.content {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.w-tree {
    width: calc(100% - 260px);
}

.w-all {
    width: 100%;
}
</style>